<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery标签左右滚动内容</title>
<link href='22222.css' rel='stylesheet' type='text/css' />
<script src="../../public/js/jquery.min.js"></script>
<script src="tabcontent.js" type="text/javascript"></script>
</head>

<body>
<div style='padding: 15px;'>
  <div class='content'>
    <h1>Tabbed content with jQuery</h1>
    <p> An example of some tabbed content containers. </p>
    <h2>Example:</h2>
    <div class='tabbed_content'>
      <div class='tabs'>
        <div class='moving_bg'> &nbsp; </div>
        <span class='tab_item'> Latest posts </span> <span class='tab_item'> Top posts </span> <span class='tab_item'> Partners </span> <span class='tab_item'> Links </span> </div>
      <div class='slide_content'>
        <div class='tabslider'>
          <ul>
            <li> <a href='#'> New looks coming your way </a> </li>
            <li> <a href='#'> jQuery convertion: Panoramic Photoviewer in Javascript </a> </li>
            <li> <a href='#'> jQuery convertion: Garagedoor effect using Javascript </a> </li>
            <li> <a href='#'> Image slider for displaying pictures or portfolios </a> </li>
            <li> <a href='#'> AjaxTwits - Load Tweets on your website with AJAX </a> </li>
          </ul>
          <ul>
            <li> <a href='#'> Panoramic Photoviewer in Javascript </a> </li>
            <li> <a href='#'> New looks coming your way </a> </li>
            <li> <a href='#'> jQuery convertion: Garagedoor effect using Javascript </a> </li>
            <li> <a href='#'> jQuery convertion: Panoramic Photoviewer in Javascript </a> </li>
            <li> <a href='#'> Lightbox + PhotoNav = LightNav </a> </li>
          </ul>
          <ul>
            <li> <a href='#'> Sieb Design | Design + Illustration </a> </li>
            <li> <a href='#'> Cybox | Internet & Communicatie </a> </li>
            <li> <a href='#'> Hypekid | Pim Arts, a freelance web-developer from the Netherlands </a> </li>
            <li> <a href='#'> Marcofolio | Marco's weblog </a> </li>
            <li> <a href='#'> Dev Tips | Become a better developer, one tip at a time </a> </li>
          </ul>
          <ul>
            <li> <a href='#'> Last.fm profile </a> </li>
            <li> <a href='#'> Gaya Design on Twitter </a> </li>
            <li> <a href='#'> My Youtube Channel </a> </li>
            <li> <a href='#'> Linked in profile </a> </li>
            <li> <a href='#'> Stuff to do with a NDS blog </a> </li>
          </ul>
        </div>
        <br style='clear: both' />
      </div>
    </div>
    <br />
    <br />
    <div class='tabbed_content'>
      <div class='tabs'>
        <div class='moving_bg'> &nbsp; </div>
        <span class='tab_item'> Latest posts </span> <span class='tab_item'> Top posts </span> <span class='tab_item'> Partners </span> <span class='tab_item'> Links </span> </div>
      <div class='slide_content'>
        <div class='tabslider'>
          <ul>
            <li> <a href='#'> New looks coming your way </a> </li>
            <li> <a href='#'> jQuery convertion: Panoramic Photoviewer in Javascript </a> </li>
            <li> <a href='#'> jQuery convertion: Garagedoor effect using Javascript </a> </li>
            <li> <a href='#'> Image slider for displaying pictures or portfolios </a> </li>
            <li> <a href='#'> AjaxTwits - Load Tweets on your website with AJAX </a> </li>
          </ul>
          <ul>
            <li> <a href='#'> Panoramic Photoviewer in Javascript </a> </li>
            <li> <a href='#'> New looks coming your way </a> </li>
            <li> <a href='#'> jQuery convertion: Garagedoor effect using Javascript </a> </li>
            <li> <a href='#'> jQuery convertion: Panoramic Photoviewer in Javascript </a> </li>
            <li> <a href='#'> Lightbox + PhotoNav = LightNav </a> </li>
          </ul>
          <ul>
            <li> <a href='#'> Sieb Design | Design + Illustration </a> </li>
            <li> <a href='#'> Cybox | Internet & Communicatie </a> </li>
            <li> <a href='#'> Hypekid | Pim Arts, a freelance web-developer from the Netherlands </a> </li>
            <li> <a href='#'> Marcofolio | Marco's weblog </a> </li>
            <li> <a href='#'> Dev Tips | Become a better developer, one tip at a time </a> </li>
          </ul>
          <ul>
            <li> <a href='#'> Last.fm profile </a> </li>
            <li> <a href='#'> Gaya Design on Twitter </a> </li>
            <li> <a href='#'> My Youtube Channel </a> </li>
            <li> <a href='#'> Linked in profile </a> </li>
            <li> <a href='#'> Stuff to do with a NDS blog </a> </li>
          </ul>
        </div>
        <br style='clear: both' />
      </div>
    </div>
  </div>
</div>
</body>
</html>
